<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
            width: 100px;
            background: gray;
        }
    </style>
</head>

<body>
    <div style="">222</div>
    <script>

        /*
            样式操作
                修改样式
                    --设置行内样式即可
                获取样式（获取的是 三种样式设置 以后的 叠加效果--最终效果）
                    --
        */
        var div = document.querySelector("div");
        div.style.color = 'green'

        // 获取div 当前宽度--    修改宽度-当前宽度加10
        //div.style.width 获取的是行内的样式
        console.log(div.style.width);
        console.log(div.style);

        // 获取一个元素经过计算的样式
        // 参数：是一个dom对象
        // 返回值：返回要给样式对象（是只读的，不能修改）
        //
        var styleObj = getComputedStyle(div);
        console.log(styleObj);
        console.log(styleObj.width);//100px


        // 获取div 当前宽度--    修改宽度-当前宽度加10
        // 

        // 100px -> 100
        var w = parseInt(styleObj.width) + 10;
        console.log(w);//110
        // 修改宽度-当前宽度加10(修改样式)

        div.style.width = w + 'px'



        // 保存定时器的返回值
        var timer = setInterval(function () {
            var styleObj = getComputedStyle(div);
            console.log(styleObj);
            console.log(styleObj.width);//100px


            // 获取div 当前宽度--    修改宽度-当前宽度加10
            // 

            // 100px -> 100
            var w = parseInt(styleObj.width) + 1;
            console.log(w);//110
            // 修改宽度-当前宽度加10(修改样式)

            div.style.width = w + 'px'

            // 判断临界值
            if (w == 500) {
                clearInterval(timer)
            }
        }, 10)



        // 兼容ie的写法
        var obj;
        // 判断getComputedStyle 函数 是否存在，如果存在就是使用
        if (window.getComputedStyle) {
            obj = getComputedStyle(div)
        } else if (div.currentStyle) {
            // 判断div 是否有currentStyle属性 如果有就用
            obj = div.currentStyle;
        }




    </script>

</body>

</html>